<template>
  <div class="app-container">
    <div class="mb-20">
      <el-button
        class="btn-active"
        icon="el-icon-plus"
        size="mini"
        @click="goAdd"
      >
        新增菜单</el-button>
      <!-- <el-button
        class="btn-delete"
        @click="deleteRow"
        icon="el-icon-delete"
        size="mini"
        >删除</el-button
      > -->
    </div>
    <div class="search">
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="">
          <el-select v-model="form.status" placeholder="显示状态">
            <el-option label="隐藏" value="1" />
            <el-option label="显示" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            v-model="form.createTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="创建时间"
          />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.createBy" placeholder="创建人员" />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.dictName" placeholder="菜单名称" />
        </el-form-item>
        <el-form-item label="">
          <el-button
            size="mini"
            icon="el-icon-search"
            @click="search"
          >查询</el-button>
          <el-button
            size="mini"
            icon="el-icon-refresh-right"
            @click="search(1)"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-text="加载中"
      row-key="menuId"
      border
      fit
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="菜单名称">
        <template slot-scope="scope">
          {{ scope.row.menuName }}
        </template>
      </el-table-column>
      <el-table-column label="菜单类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.menuType }}
        </template>
      </el-table-column>
      <el-table-column label="菜单地址" align="center">
        <template slot-scope="scope">
          {{ scope.row.url }}
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="显示状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1" class="green-tag">隐藏</span>
          <span v-if="scope.row.status == 0" class="other-tag">显示</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="240"
      >
        <template slot-scope="scope">
          <el-button
            class="detail"
            icon="el-icon-edit-outline"
            @click="goEdit(scope.row)"
          >编辑</el-button>
          <el-button
            class="detail"
            icon="el-icon-edit-outline"
            @click="deleteRow(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      :title="isAdd ? '添加菜单' : '编辑菜单'"
      :visible.sync="dialogFormVisible"
      :modal="false"
      width="800px"
    >
      <el-form ref="dialogForm" inline :model="dialogForm">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="上级菜单"
              prop="parentId"
              :rules="{
                required: true,
                message: '上级菜单不能为空',
                trigger: 'blur',
              }"
            >
              <div class="el-input" style="width: 248px">
                <el-select
                  v-model="dialogForm.parentId"
                  placeholder="上级菜单"
                  @change="handleNodeClick"
                >
                  <el-option
                    v-for="item in options"
                    :value="item.menuId"
                    :label="item.menuName"
                  />
                </el-select>
                <!-- <el-cascader
                  :options="options"
                  :props="{ checkStrictly: true, ...defaultProps }"
                  clearable
                  v-model="parentId"
                  @change="handleNodeClick"
                ></el-cascader> -->
              </div>
              <!-- <el-input v-model="dialogForm.parentId"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="菜单类型"
              prop="menuType"
              :rules="{
                required: true,
                message: '菜单类型不能为空',
                trigger: 'blur',
              }"
            >
              <div class="el-input" style="width: 248px">
                <el-radio-group v-model="dialogForm.menuType">
                  <el-radio label="M">目录</el-radio>
                  <el-radio label="C">菜单</el-radio>
                  <!-- <el-radio label="F">按钮</el-radio> -->
                </el-radio-group>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="菜单名称"
              prop="menuName"
              :rules="{
                required: true,
                message: '菜单名称不能为空',
                trigger: 'blur',
              }"
            >
              <el-input v-model="dialogForm.menuName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="显示排序"
              prop="orderNum"
              :rules="{
                required: true,
                message: '显示排序不能为空',
                trigger: 'blur',
              }"
            >
              <el-input v-model="dialogForm.orderNum" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="路由地址"
              prop="url"
              :rules="{
                required: true,
                message: '路由地址不能为空',
                trigger: 'blur',
              }"
            >
              <el-input v-model="dialogForm.url" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="显示状态">
              <el-radio-group v-model="dialogForm.visible">
                <el-radio :label="0">显示</el-radio>
                <el-radio :label="1">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="center">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button
          class="cancel"
          @click="dialogFormVisible = false"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { systemList, menuList } from '@/api/table'
import { removeMenu, menuAdd, menuEdit, userResetPwd } from '@/api/form'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      parentId: 0,
      defaultProps: {
        children: 'children',
        label: 'menuName',
        value: 'menuId'
      },
      dialogFormVisible: false,
      dialogForm: {
        visible: 0
      },
      currentPage: 1,
      pageNum: 10,
      total: 0,
      multipleSelection: [],
      form: {},
      list: null,
      isAdd: false,
      options: [],
      listLoading: true
    }
  },
  created() {
    // menuList().then((res) => {
    //   console.log(res);
    //   this.options = res.rows;
    // });
    this.fetchData()
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
      this.dialogForm.parentId = data
    },
    reset(row) {
      userResetPwd({ SysUser: row.userId }).then((res) => {
        if (res.code == 200) {
          this.$message.success('重置成功')
          this.fetchData()
        }
      })
    },
    goEdit(row) {
      console.log(row)
      this.isAdd = false
      // if (row.parentName == null) row.parentName = "主菜单";
      this.dialogFormVisible = true
      this.options = [...[{ menuName: '主菜单', menuId: 0 }], ...this.list]
      console.log(this.options)
      row.visible = Number(row.visible)
      this.parentId = row.parentId
      // setTimeout(() => {
      this.dialogForm = row
      console.log(this.dialogForm.parentId)
      // this.dialogForm.parentId = row.menuId;

      // }, 1000);
    },
    search(num) {
      if (num == 1) {
        this.form = {}
      }
      this.currentPage = 1
      this.fetchData()
    },
    submit() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          if (this.dialogForm.menuId) {
            menuEdit(this.dialogForm).then((res) => {
              if (res.code == 200) {
                this.$message.success('操作成功')
                this.dialogFormVisible = false
                this.fetchData()
              }
            })
          } else {
            menuAdd(this.dialogForm).then((res) => {
              if (res.code == 200) {
                this.$message.success('操作成功')
                this.dialogFormVisible = false
                this.fetchData()
              }
            })
          }
        }
      })
    },
    deleteRow(row) {
      removeMenu(row.menuId).then((res) => {
        if (res.code == 200) {
          this.$message.success('操作成功')
          this.fetchData()
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.pageNum = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    goAdd() {
      this.isAdd = true
      this.parentId = 0
      this.dialogForm = { visible: 0 }
      // let par = JSON.parse(JSON.stringify(this.list));
      // if (par && par.length > 0) {
      //   par.map((item) => {
      //     item.parentId = item.menuId;
      //     item.parentName = item.menuName;
      //   });
      // }
      this.options = [...[{ menuName: '主菜单', menuId: 0 }], ...this.list]
      this.dialogFormVisible = true
    },
    fetchData() {
      this.listLoading = true
      menuList({
        pageSize: this.pageNum,
        pageNum: this.currentPage,
        ...this.form
      }).then((res) => {
        console.log(res)
        this.list = res

        const par = JSON.parse(JSON.stringify(res))
        if (par && par.length > 0) {
          par.map((item) => {
            item.parentId = item.menuId
            item.parentName = item.menuName
          })
        }
        this.options = [...[{ parentName: '主菜单', parentId: 0 }], ...par]
        console.log(this.options)
        this.listLoading = false
        // this.total = res.total;
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep {
  .detail.el-button {
    padding: 9px 4px;
  }
}
::v-deep {
  .v-modal {
    background: none;
  }
}
::v-deep {
  .el-dialog {
    color: white;
    background: rgb(3, 28, 43);
    .el-dialog__title,
    .el-form-item__label {
      color: white;
    }
  }
}
</style>
